<template>
  <el-form
    ref="formRef"
    class="form"
    :model="innerModel"
  >
    <el-form-item
      prop="name"
      label="角色名"
      class="form-item"
    >
      <el-input
        v-model="innerModel.name"
        placeholder="请输入角色名"
      >
      </el-input>
    </el-form-item>
    <el-form-item
      class="form-item"
    >
      <el-button
        icon="el-icon-search"
        type="primary"
        @click="handleQuery"
      >
        查 询
      </el-button>
      <el-button
        icon="el-icon-refresh"
        @click="handleReset"
      >
        重 置
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
/**
 * @typedef {{
 *   'name': String,
 * }} Model
 */
/**
 * # 查询表单
 * 用于输入查询参数，并且按找这些参数进行筛选查询角色数据
 * |  表单项  |         作用         |
 * | :------: | :------------------: |
 * | `角色名` | 记录用户输入的角色名 |
 */
export default {
  'name': 'QueryForm',

  'props': {
    /**
     * 从父组件传来的`查询表单`的数据
     *
     * 这个数据不会直接使用，而是会先复制到子组件内部中，使用副本
     * @type {Model}
     */
    'model': {
      'default' () {
        return {
          'name': '',
        }
      },
      'type': Object,
    },
  },

  'data' () {
    return {
      /**
       * 内部的表单数据，真正用于展示的数据
       * @type {Model}
       */
      'innerModel': {},
    }
  },

  'created' () {
    this.setInnerModel()
  },

  'methods': {
    /**
     * 处理`查询`按钮的点击事件
     */
    'handleQuery' () {
      this.$emit('query', this.innerModel)
    },
    /**
     * 处理`重置`按钮的点击事件
     */
    'handleReset' () {
      this.$nextTick(() => {
        this.$refs.formRef.resetFields()
      })
      this.$emit('reset')
    },
    /**
     * 将内部的表单数据和父组件传入的表单数据参数同步
     */
    'setInnerModel' () {
      this.innerModel = {
        ...this.model,
      }
    },
  },
}
</script>

<style scoped lang="scss">
.form {
  display: flex;

  .form-item {
    display: flex;
    margin: 0 8px;
    width: 250px;
    height: 40px;
  }
}
</style>
